<template>
  <ul class="list-scroll-ul" ref="contentRef">
    <li v-for="(item,index) in compSourceData"
        :key="index"
        class="list-scroll-li">
      <slot :index="index" :item="item" :key="index" name="list-item"></slot>
    </li>
  </ul>
</template>

<script lang="ts" setup>
// @ts-ignore
import {onBeforeUnmount, onMounted, ref} from "vue";

defineOptions({
  name: "ListAutoScroll"
});
const props = defineProps({
      compSourceData: {
        type: Array, default: function () {
          return []
        }
      },
      height: {
        type: String, default: "400px"
      },
    }
);

const contentRef = ref<any>();

let timer: any = undefined;

onMounted(() => {
  initDiv();
})
const initDiv = () => {

  timer && clearInterval(timer)
  timer = setInterval(function(){setInter()}, 100)

  contentRef.value.addEventListener('mouseover', function () {
    timer && clearInterval(timer)
  })
  contentRef.value.addEventListener('mouseout', function () {
    timer = setInterval(function(){setInter()}, 100)
  })
}
const setInter = function () {
  if (contentRef.value.scrollTop === contentRef.value.scrollHeight - contentRef.value.clientHeight) {
    contentRef.value.scrollTop = 0
  } else {
    contentRef.value.scrollTop++
  }
}

onBeforeUnmount(()=>{
  timer && clearInterval(timer)
})
</script>

<style scoped>
.list-scroll-ul {
  width: calc(100% + 20px);
  list-style: none;
  height: v-bind(height);
  overflow-y: auto;
  margin: 0px;
  padding: 0px 20px 0px 0px;
}

.list-scroll-ul :deep(li) {
  width: 100%;
  list-style: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

</style>